<template>
  <div class="record-view-container">
    <!-- 页面标题栏 -->
    <div class="page-header">
      <h1 class="page-title">
        <span class="icon">🩺</span>
        患者档案管理
      </h1>
      <div class="header-actions">
        <el-button 
          type="primary" 
          plain 
          icon="el-icon-plus" 
          class="create-btn"
        >
          新建档案
        </el-button>
        <el-button 
          type="info" 
          plain 
          icon="el-icon-arrow-left" 
          class="back-button"
          @click="handleBack"
        >
          返回
        </el-button>
      </div>
    </div>

    <!-- 搜索表单卡片 -->
    <el-card class="search-card" shadow="hover">
      <el-form :inline="true" :model="addfrom" class="search-form" label-width="80px">
        <el-form-item label="姓名">
          <el-input 
            v-model="addfrom.recordName" 
            placeholder="请输入患者姓名"
            prefix-icon="el-icon-user"
            clearable
            class="search-input"
          />
        </el-form-item>
        <el-form-item label="建档日期">
          <el-date-picker
            v-model="addfrom.date"
            type="date"
            placeholder="选择建档日期"
            prefix-icon="el-icon-calendar"
            class="search-datepicker"
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="GetData()"
            icon="el-icon-search"
            class="search-btn"
          >
            查询
          </el-button>
          <el-button 
            @click="resetForm"
            icon="el-icon-refresh-left"
            class="reset-btn"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格卡片 -->
    <el-card class="table-card" shadow="hover">
      <div class="table-header">
        <h3 class="section-title">
          <span class="section-icon">📋</span>
          患者档案列表
        </h3>
        <el-button 
          type="success" 
          plain 
          icon="el-icon-plus"
          class="archive-btn"
          @click="Setting.IsOpen = true"
        >
          建档
        </el-button>
      </div>
      
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :row-class-name="tableRowClassName"
        stripe
        highlight-current-row
        empty-text="暂无数据"
      >
        <el-table-column 
          type="index" 
          label="序号" 
          width="80"
          align="center"
        />
        <el-table-column 
          prop="recordName" 
          label="姓名" 
          width="120"
          align="center"
        />
        <el-table-column 
          prop="recordSex" 
          label="性别" 
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag 
              :type="scope.row.recordSex === 1 ? 'primary' : 'danger'" 
              size="small"
              effect="light"
            >
              {{ scope.row.recordSex === 1 ? '男' : '女' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          prop="recordAge" 
          label="年龄" 
          width="80"
          align="center"
        />
        <el-table-column 
          prop="recordIdcard" 
          label="身份证号码" 
          min-width="180"
        >
          <template #default="scope">
            <span class="idcard-text">{{ formatIdCard(scope.row.recordIdcard) }}</span>
          </template>
        </el-table-column>
        <el-table-column 
          prop="recordPhone" 
          label="联系电话" 
          width="140"
        />
        <el-table-column 
          prop="recordSite" 
          label="家庭地址" 
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="recordTeam" 
          label="签约团队" 
          width="150"
        />
        <el-table-column 
          prop="recordState" 
          label="签约状态" 
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag 
              :type="scope.row.recordState === 1 ? 'success' : 'warning'" 
              size="small"
              effect="light"
            >
              {{ scope.row.recordState === 1 ? '已签约' : '未签约' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          prop="" 
          label="操作" 
          width="150"
          align="center"
        >
          <template #default="scope">
            <el-button 
              type="primary" 
              @click="xiang(scope.row)" 
              plain
              size="small"
              class="detail-btn"
            >
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="page.pageIndex"
        v-model:page-size="page.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>
  </div>

   <el-dialog v-model="Setting.IsOpen" title="居民建档" width="500">
     <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="from"
    :rules="rules"
    label-width="auto"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="基础档案" name="first">
        <el-form-item label="姓名" prop="recordName">
      <el-input v-model="from.recordName" />
    </el-form-item>
         <el-form-item label="性别" prop="recordSex">
      <el-radio-group v-model="from.recordSex">
        <el-radio value="1">男</el-radio>
        <el-radio value="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="年龄" prop="recordAge">
      <el-input v-model="from.recordAge" />
    </el-form-item>
      <el-form-item label="身份证" prop="recordIdcard">
      <el-input v-model="from.recordIdcard" />  
    </el-form-item>
       <el-form-item label="联系电话" prop="recordPhone">
      <el-input v-model="from.recordPhone" />
        </el-form-item>
       <el-form-item label="家庭地址" prop="recordSite">
      <el-input v-model="from.recordSite" />
    </el-form-item>
    <el-form-item label="签约团队" prop="recordTeam">
      <el-input v-model="from.recordTeam" />
    </el-form-item>
    <el-form-item label="签约状态" prop="recordState">
      <el-radio-group v-model="from.recordState">
        <el-radio value="1">已签约</el-radio>
        <el-radio value="2">未签约</el-radio>
      </el-radio-group>
    </el-form-item>
     <el-form-item label="出生日期">
      <el-date-picker
        v-model="from.recordDate"
        type="date"
        placeholder="请选择出生日期"
        clearable
      />
    </el-form-item>
        <el-form-item label="婚姻" prop="recordMarriage">
      <el-radio-group v-model="from.recordMarriage">
        <el-radio value="已婚">已婚</el-radio>
        <el-radio value="未婚">未婚</el-radio>
      </el-radio-group>   
    </el-form-item>
         <el-form-item label="血型" prop="recordBlood">
      <el-input v-model="from.recordBlood" />
    </el-form-item>
     <el-form-item label="参保情况" prop="recordInsured">
      <el-radio-group v-model="from.recordInsured">
        <el-radio value="1">已参</el-radio>
        <el-radio value="2">未参</el-radio>
      </el-radio-group>
    </el-form-item>
             <el-form-item label="职业" prop="recordProfession">
      <el-input v-model="from.recordProfession" />
    </el-form-item>
         <el-form-item label="文化程度" prop="recordCulture">
      <el-radio-group v-model="from.recordCulture">
        <el-radio value="1">中专</el-radio>
        <el-radio value="2">本科</el-radio>
        <el-radio value="3">研究生</el-radio>
        <el-radio value="4">博士</el-radio>
      </el-radio-group>
    </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="行为信息" name="second">
            <el-form-item label="是否吸烟">
      <el-select
        v-model="from.behaviorSmoke"
        placeholder="请选择"
        clearable
      >
        <el-option label="是" :value="false" />
        <el-option label="否" :value="true" />
      </el-select>
    </el-form-item>
     <el-form-item label="是否戒烟">
      <el-select
        v-model="from.behaviorCessation"
        placeholder="请选择"
        clearable
      >
        <el-option label="是" :value="false" />
        <el-option label="否" :value="true" />
      </el-select>
    </el-form-item>
          <el-form-item label="是否被动吸烟">
      <el-select
        v-model="from.behaviorPassivity"
        placeholder="请选择"
        clearable
      >
        <el-option label="是" :value="false" />
        <el-option label="否" :value="true" />
      </el-select>
    </el-form-item>
     <el-form-item label="是否饮酒">
      <el-select
        v-model="from.behaviorDrink"
        placeholder="请选择"
        clearable
      >
        <el-option label="是" :value="false" />
        <el-option label="否" :value="true" />
      </el-select>
    </el-form-item>
         <el-form-item label="是否运动">
      <el-select
        v-model="from.behaviorExercise"
        placeholder="请选择"
        clearable
      >
        <el-option label="是" :value="false" />
        <el-option label="否" :value="true" />
      </el-select>
    </el-form-item>
             <el-form-item label="高血压知晓情况">
      <el-select
        v-model="from.behaviorHypertension"
        placeholder="请选择"
        clearable
      >
        <el-option label="患有高血压" value="患有高血压" />
        <el-option label="血压正常" value="血压正常" />
        <el-option label="从不测量" value="从不测量" />
      </el-select>
    </el-form-item>
             <el-form-item label="糖尿病知晓情况">
      <el-select
        v-model="from.behaviorDiabetes"
        placeholder="请选择"
        clearable
      >
        <el-option label="患有糖尿病" value="患有糖尿病" />
        <el-option label="血糖正常" value="血糖正常" />
      </el-select>
    </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="体格信息" name="third">
     <el-form-item label="身高" prop="physiqueHeight">
       <el-input v-model="from.physiqueHeight" />
    </el-form-item>
     <el-form-item label="体重" prop="physiqueWeight">
       <el-input v-model="from.physiqueWeight" />
    </el-form-item>
     <el-form-item label="BML" prop="physiqueBMI">
       <el-input v-model="from.physiqueBMI" />
    </el-form-item>
     <el-form-item label="腰围" prop="physiqueWaistline">
       <el-input v-model="from.physiqueWaistline" />
    </el-form-item>
     <el-form-item label="收缩压" prop="physiqueShrink">
       <el-input v-model="from.physiqueShrink" />
    </el-form-item>
     <el-form-item label="舒张压" prop="physiqueDiastole">
       <el-input v-model="from.physiqueDiastole" />
    </el-form-item>
     <el-form-item label="空腹血糖" prop="physiqueFBG">
       <el-input v-model="from.physiqueFBG" />
    </el-form-item>
    </el-tab-pane>
  </el-tabs>
      <el-form-item>   
      <el-button @click="Setting.IsOpen = false">取消</el-button>
         <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

//居民建档
const ruleFormRef = ref<FormInstance>()

const from=reactive({
  "recordName": "",
  "recordSex": 0,
  "recordAge": "",
  "recordIdcard": "",
  "recordPhone": "",
  "recordSite": "",
  "recordTeam": "",
  "recordState": 0,
  "recordDate": "2025-10-24T03:16:28.735Z",
  "recordMarriage": "",
  "recordBlood": "",
  "recordInsured": 0,
  "recordProfession": "",
  "recordCulture": 0,
  "behaviorSmoke": false,
  "behaviorCessation": false,
  "behaviorPassivity": false,
  "behaviorDrink": false,
  "behaviorExercise": false,
  "behaviorHypertension": "",
  "behaviorDiabetes": "",
  "physiqueHeight": "",
  "physiqueWeight": "",
  "physiqueBMI": "",
  "physiqueWaistline": "",
  "physiqueShrink": "",
  "physiqueDiastole": "",
  "physiqueFBG": ""
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     axios.post('http://localhost:5203/api/Managment/RecordAdd',from).then(res=>{
      if(res.data.code==1){
        ElMessage.success('添加成功')
        Setting.value.IsOpen=false
      }else{
        ElMessage.error('添加失败')
      }
     })
    } else {
      console.log('error submit!', fields)
    }
  })
}


const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

const router = useRouter()
const tableData = ref([])
const addfrom = reactive({
  recordName: "",
  date: ""
})

const page = ref({
  pageIndex: 1,
  pageSize: 5,
  totalCount: 0,
  pageCount: 0,
})

// 表格头部样式
const headerCellStyle = {
  backgroundColor: '#f5f7fa',
  fontWeight: 600,
  color: '#1f2937',
  textAlign: 'center'
}

// 表格行样式
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd'
}

onMounted(() => {
  GetData()
})

// 监听分页变化
const handleSizeChange = (val: number) => {
  page.value.pageSize = val
  GetData()
}

const handleCurrentChange = (val: number) => {
  page.value.pageIndex = val
  GetData()
}

//添加弹出框
const Setting=ref({
  IsOpen:false
})

// 获取数据
const GetData = () => {
  axios.get('http://localhost:5108/api/Manager/RecordList', {
    params: {
      recordName: addfrom.recordName,
      pageIndex: page.value.pageIndex,
      pageSize: page.value.pageSize
    }
  }).then(res => {
    tableData.value = res.data.data.data
    page.value.totalCount = res.data.data.totalCount
    page.value.pageCount = res.data.data.pageCount
  }).catch(error => {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
    // 提供模拟数据用于演示
    tableData.value = getMockData()
    page.value.totalCount = 10
  })
}

// 格式化身份证号（中间部分用*替代）
const formatIdCard = (idCard: string) => {
  if (!idCard || idCard.length < 8) return idCard
  const start = idCard.substring(0, 6)
  const end = idCard.substring(idCard.length - 4)
  return `${start}********${end}`
}

// 跳转到详情页
const xiang = (row: any) => {
  // 可以将患者ID传递给详情页
  router.push({ path: '/IndetailView', query: { id: row?.id || '' } })
}

// 重置表单
const resetForm = () => {
  addfrom.recordName = ''
  addfrom.date = ''
  GetData()
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 模拟数据（用于演示）
const getMockData = () => {
  return [
    {
      id: '1',
      recordName: '张三',
      recordSex: 1,
      recordAge: 29,
      recordIdcard: '513900200109125328',
      recordPhone: '13789512245',
      recordSite: '北京市朝阳区某某街道123号',
      recordTeam: '内科团队',
      recordState: 1
    },
    {
      id: '2',
      recordName: '李四',
      recordSex: 0,
      recordAge: 35,
      recordIdcard: '310101199001011234',
      recordPhone: '13800138001',
      recordSite: '上海市徐汇区某某路456号',
      recordTeam: '全科团队',
      recordState: 0
    },
    {
      id: '3',
      recordName: '王五',
      recordSex: 1,
      recordAge: 42,
      recordIdcard: '440101198506066789',
      recordPhone: '13900139001',
      recordSite: '广州市天河区某某大道789号',
      recordTeam: '外科团队',
      recordState: 1
    },
    {
      id: '4',
      recordName: '赵六',
      recordSex: 0,
      recordAge: 27,
      recordIdcard: '510101199603033456',
      recordPhone: '13500135001',
      recordSite: '成都市锦江区某某路234号',
      recordTeam: '妇产科团队',
      recordState: 1
    },
    {
      id: '5',
      recordName: '钱七',
      recordSex: 1,
      recordAge: 55,
      recordIdcard: '320101196812124567',
      recordPhone: '13600136001',
      recordSite: '南京市鼓楼区某某巷567号',
      recordTeam: '内科团队',
      recordState: 0
    }
  ]
}

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
/* 全局样式 */
.record-view-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 20px;
  font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题栏 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #01337A;
}

.page-title .icon {
  font-size: 32px;
}

.header-actions {
  display: flex;
  gap: 16px;
}

.create-btn,
.back-button {
  padding: 10px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
  background: linear-gradient(135deg, #165dff, #0040c9);
  color: white;
}

.back-button:hover {
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(144, 164, 174, 0.3);
  background: linear-gradient(135deg, #90a4ae, #78909c);
  color: white;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition: all 0.3s ease;
}

.search-card:hover {
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
  transform: translateY(-2px);
}

.search-form {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input,
.search-datepicker {
  width: 240px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.search-input:focus,
.search-datepicker:focus {
  border-color: #165dff;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
}

.search-btn,
.reset-btn {
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.search-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
  background: linear-gradient(135deg, #165dff, #0040c9);
}

.reset-btn:hover {
  transform: rotate(15deg);
  box-shadow: 0 4px 12px rgba(144, 164, 174, 0.3);
}

.search-btn i,
.reset-btn i {
  margin-right: 4px;
}

/* 表格卡片 */
.table-card {
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
  transform: translateY(-2px);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 24px 24px 16px 24px;
  border-bottom: 2px solid #e0f2fe;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #01337A;
}

.section-icon {
  font-size: 24px;
}

.archive-btn {
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.archive-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

/* 表格样式 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  border: none;
}

.el-table th.is-leaf {
  border-bottom: 2px solid #e0f2fe;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.el-table__row {
  transition: all 0.3s ease;
  border-radius: 8px;
}

.el-table__row:hover {
  background-color: #f0f9ff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
}

.table-row-even {
  background-color: #ffffff;
}

.table-row-odd {
  background-color: #f9fafb;
}

.idcard-text {
  font-family: monospace;
  letter-spacing: 1px;
  color: #475569;
}

.detail-btn {
  padding: 6px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.detail-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
  background: linear-gradient(135deg, #165dff, #0040c9);
  color: white;
}

/* 分页组件 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.el-pagination {
  margin: 0;
}

.el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 4px;
  transition: all 0.3s ease;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}

.el-pagination .el-pager li:hover:not(.disabled):not(.active) {
  color: #165dff;
  transform: scale(1.1);
  background-color: #e0f2fe;
}

.el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #165dff, #0040c9);
  color: #fff;
  font-weight: 600;
}

.el-pagination button {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-pagination button:hover:not(.disabled) {
  background-color: #e0f2fe;
  color: #165dff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .search-form .el-form-item {
    margin-bottom: 16px;
  }
  
  .search-input,
  .search-datepicker {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .record-view-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .create-btn,
  .back-button {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .table-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 16px 16px 16px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .archive-btn {
    width: 100%;
    padding: 8px 16px;
  }
  
  .search-form {
    padding: 16px;
    gap: 12px;
  }
  
  .search-input,
  .search-datepicker {
    width: 100%;
  }
  
  .pagination-container {
    justify-content: center;
    padding: 16px;
  }
  
  .el-table {
    font-size: 13px;
  }
  
  .el-table-column--selection,
  .el-table-column--index {
    width: 60px !important;
  }
  
  /* 隐藏部分不重要的列 */
  .el-table-column:nth-child(6),
  .el-table-column:nth-child(7) {
    display: none;
  }
}

@media (max-width: 480px) {
  .record-view-container {
    padding: 12px;
  }
  
  .page-header,
  .search-card,
  .table-card,
  .pagination-container {
    border-radius: 12px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .create-btn,
  .back-button {
    width: 100%;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .detail-btn {
    padding: 4px 12px;
    font-size: 12px;
  }
}
/* 模态框样式优化 */
.el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.el-dialog__header {
  background: linear-gradient(135deg, #01337A, #156296);
  color: white;
  padding: 20px 24px;
}

.el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.el-dialog__body {
  padding: 24px;
}

.el-form {
  max-width: 100%;
}

.el-form-item__label {
  font-weight: 500;
  color: #01337A;
}

.el-tabs {
  margin-top: 16px;
}

.el-tabs__header {
  border-bottom: 2px solid #e0f2fe;
  margin-bottom: 20px;
}

.el-tabs__item {
  padding: 12px 24px;
  font-weight: 500;
  color: #475569;
  transition: all 0.3s ease;
}

.el-tabs__item:hover {
  color: #165dff;
}

.el-tabs__item.is-active {
  color: #01337A;
  font-weight: 600;
}

.el-tabs__active-bar {
  background-color: #01337A;
  height: 3px;
}

.demo-tabs > .el-tabs__content {
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>